<template>
  <div class="content">
    <!-- 欢迎标语 -->
    <div class="welcome-section">
      <p class="welcome-text">欢迎来到智慧社区，在这可以为你提供心仪的住宿</p>
    </div>

    <!-- 横向布局容器：统计 + 轮播 + 评论 -->
    <div class="horizontal-layout">
      <!-- 左侧统计区域 -->
      <div class="stats-section">
        <div class="stat-item" style="background-color: #70e296;">
          <span class="stat-label">社区数量</span>
          <span class="stat-value">{{ countData.comCount }}</span>
        </div>
        <div class="stat-item" style="background-color: #deece3;">
          <span class="stat-label">房间数</span>
          <span class="stat-value">{{ countData.roomCount }}</span>
        </div>
        <div class="stat-item" style="background-color: #2392ec;">
          <span class="stat-label">入住人数</span>
          <span class="stat-value">{{ countData.inhabitedCount }}</span>
        </div>
      </div>

      <!-- 中间轮播图 -->
      <div class="carousel-section" @click="handleCarouselClick(currentIndex)">
        <div class="carousel-container" ref="carouselContainer">
          <div 
            class="carousel-track" 
            :style="{ transform: `translateX(-${currentIndex * 100}%)`, transition: transitionStyle }"
          >
            <div class="carousel-slide" v-for="(item, index) in CarouselImageList" :key="item.comId">
              <img 
                :src="item.img" 
                :alt="item.comName" 
                class="carousel-image"
              >
              
              <div class="carousel-info">
                <div class="community-name">{{ item.comName }}</div>
                <!-- 从address数组取第一个地址展示 -->
                <div class="address-info" v-if="item.address && item.address.length > 0">
                  <span class="address-label">地址：</span>
                  <span class="address-value">
                    {{ `${item.address[0].market} ${item.address[0].region} ${item.address[0].details}` }}
                  </span>
                </div>
                <div class="address-info" v-else>
                  <span class="address-value">地址暂无</span>
                </div>
                
                <div class="description-info">
                  {{ item.describe.substring(0, 80) }}...
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <button 
            class="indicator-dot"
            v-for="(item, index) in CarouselImageList" 
            :key="item.comId"
            :class="{ active: currentIndex === index }"
            @click.stop="goToSlide(index)"
          ></button>
        </div>
        
        <!-- 左右箭头 -->
        <button class="carousel-arrow prev-arrow" @click.stop="prevSlide">
          <span>&lt;</span>
        </button>
        <button class="carousel-arrow next-arrow" @click.stop="nextSlide">
          <span>&gt;</span>
        </button>
      </div>

      <!-- 右侧评论区域 - 加宽 -->
      <div class="comment-section" style="width: 320px;">
        <div class="comment-header">精选评论</div>
        
        <!-- 空评论提示 -->
        <div class="comment-empty" v-if="hostComments.length === 0">
          <div class="empty-icon">
            <i class="fa fa-comment-o"></i>
          </div>
          <div class="empty-text">暂无评论数据</div>
        </div>
        
        <div class="comment-list" ref="commentListRef">
          <div class="comment-card" 
               v-for="(comment, index) in hostComments" 
               :key="index"
               :class="{ active: currentCommentIndex === index }">
            
            <div class="comment-header-row">
              <div class="user-avatar" :style="{ backgroundColor: getAvatarColor(comment.user.name) }">
                <span class="avatar-initial">{{ getInitials(comment.user.name) }}</span>
              </div>
              <div class="user-info">
                <div class="user-name">{{ comment.user.name }}</div>
                <div class="comment-time">{{ formatCommentTime(comment.createdAt) }}</div>
              </div>
            </div>
            
            <div class="comment-body">
              <div class="comment-content">{{ comment.content }}</div>
            </div>
          </div>
        </div>
        
        <!-- 评论指示器 -->
        <div class="comment-indicators" v-if="hostComments.length > 1">
          <span 
            class="indicator-dot"
            v-for="(item, index) in hostComments" 
            :key="index"
            :class="{ active: currentCommentIndex === index }"
          ></span>
        </div>
      </div>
    </div>

    <!-- 推荐列表 + 筛选区域 -->
    <div class="recommend-container">
      <!-- 筛选栏 -->
      <div class="filter-bar">
        <span 
          class="filter-btn" 
          @click="handleFilter('rate')"
          :class="{ active: currentFilter === 'rate' }"
        >评分最高</span>
        
        <!-- 三级地址级联选择器 -->
        <el-cascader
          v-model="selectedAddress"
          :options="addressOptions"
          :props="{ expandTrigger: 'hover', label: 'label', value: 'value', children: 'children' }"
          placeholder="请选择地址（城市/区域/详细地址）"
          class="address-cascader"
          @change="handleAddressChange"
        ></el-cascader>
      </div>

      <!-- 推荐列表 -->
      <div class="recommend-list">
        <div 
          class="recommend-item" 
          v-for="(item, index) in recommendList" 
          :key="item.comId"
          @click="handleItemClick(item)"
        >
          <!-- 星级评分 -->
          <div class="star-rating">
            <span 
              class="star" 
              v-for="starIdx in 5" 
              :key="starIdx"
              :class="{ 'filled': Math.round(item.assess) >= starIdx }"
            >★</span>
            <span class="rating-value">{{ item.assess.toFixed(1) }}</span>
          </div>
          <!-- 社区名称 -->
          <div class="item-name">{{ item.comName }}</div>
          <!-- 地址信息（取第一个地址） -->
          <div class="item-address" v-if="item.address && item.address.length > 0">
            <span class="address-label">地址：</span>
            <span class="address-value">
              {{ `${item.address[0].market} ${item.address[0].region} ${item.address[0].details}` }}
            </span>
          </div>
          <div class="item-address" v-else>
            <span class="address-label">地址：</span>
            <span class="address-value">地址暂无</span>
          </div>
          <!-- 描述 -->
          <div class="item-desc">{{ item.describe.substring(0, 100) }}...</div>
        </div>
        <!-- 空数据提示 -->
        <p class="empty-tip" v-if="recommendList.length === 0">暂无推荐数据</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onUnmounted, computed } from 'vue';
import { ElCascader } from 'element-plus';
import { communityCount, communityList, communityRecommendList, communityListByAddress, getHotComments } from '@/api/checkInOption'; 
import { useRouter } from 'vue-router';
const router = useRouter();

// 统计数据
const countData = ref({
  roomCount: null,
  comCount: null,
  inhabitedCount: null
});

// 轮播图数据
const CarouselImageList = ref([]);
const currentIndex = ref(0);
const transitionStyle = ref('transform 0.5s ease');
const carouselContainer = ref(null);

// 推荐列表相关
const recommendList = ref([]);
const originalList = ref([]); // 保存原始列表，用于恢复
const addressOptions = ref([]); // 三级地址选项
const selectedAddress = ref([]); // 选中的地址
const currentFilter = ref(''); // 当前筛选类型
const hostComments = ref([]); // 热门评论数据

// 评论滚动相关
const commentListRef = ref(null);
let commentTimer = null;
const currentCommentIndex = ref(0); // 当前显示的评论索引

// 自动轮播定时器
let carouselTimer = null;

// 初始化数据
onMounted(() => {
  console.log('组件初始化开始');
  
  // 1. 获取统计数据
  communityCount().then(res => {
    if (res.code === 200) {
      countData.value = res.data;
      console.log('统计数据加载成功');
    }
  }).catch(err => console.error('统计数据获取失败：', err));
  
  // 2. 获取轮播图数据并生成地址选项
  communityList().then(res => {
    if (res.code === 200) {
      CarouselImageList.value = res.data;
      addressOptions.value = formatAddressOptions(res.data);
      startAutoPlay(); // 启动自动轮播
      console.log('轮播数据加载成功');
    }
  }).catch(err => console.error('轮播数据获取失败：', err));
  
  // 3. 获取初始推荐列表并保存原始数据
  communityRecommendList().then(res => {
    if (res.code === 200) {
      originalList.value = res.data;
      recommendList.value = [...res.data];
      console.log('推荐列表加载成功');
    }
  }).catch(err => console.error('推荐列表获取失败：', err));

  // 4. 获取热门评论数据
  getHotComments().then(res => {
    if (res.code === 200) {
      // 严格校验数据格式
      const validComments = res.data.filter(comment => 
        comment.user && comment.user.name && comment.content && comment.createdAt
      );
      
      if (validComments.length > 0) {
        hostComments.value = validComments;
        console.log(`成功加载${validComments.length}条评论数据`);
        startCommentScroll(); // 启动评论滚动
      } else {
        console.error('评论数据格式无效:', res.data);
        // 使用模拟数据，包含createdAt字段
        hostComments.value = [
          { 
            user: { name: '张小明' }, 
            content: '这个社区环境非常好，物业服务也很到位，居住体验很棒！',
            createdAt: new Date().getTime() - 3600000 // 1小时前
          },
          { 
            user: { name: '李华' }, 
            content: '房间布局合理，采光充足，周边配套设施完善，推荐给大家！',
            createdAt: new Date().getTime() - 7200000 // 2小时前
          },
          { 
            user: { name: '王芳' }, 
            content: '交通便利，小区绿化做得很好，安静舒适，是个理想的居住地方。',
            createdAt: new Date().getTime() - 10800000 // 3小时前
          }
        ];
        startCommentScroll();
      }
    } else {
      console.error('获取评论接口失败:', res);
      // 使用模拟数据
      hostComments.value = [
        { 
          user: { name: '张小明' }, 
          content: '这个社区环境非常好，物业服务也很到位，居住体验很棒！',
          createdAt: new Date().getTime() - 3600000 // 1小时前
        },
        { 
          user: { name: '李华' }, 
          content: '房间布局合理，采光充足，周边配套设施完善，推荐给大家！',
          createdAt: new Date().getTime() - 7200000 // 2小时前
        },
        { 
          user: { name: '王芳' }, 
          content: '交通便利，小区绿化做得很好，安静舒适，是个理想的居住地方。',
          createdAt: new Date().getTime() - 10800000 // 3小时前
        }
      ];
      startCommentScroll();
    }
  }).catch(err => {
    console.error('获取热门评论失败：', err);
    // 使用模拟数据
    hostComments.value = [
      { 
        user: { name: '张小明' }, 
        content: '这个社区环境非常好，物业服务也很到位，居住体验很棒！',
        createdAt: new Date().getTime() - 3600000 // 1小时前
      },
      { 
        user: { name: '李华' }, 
        content: '房间布局合理，采光充足，周边配套设施完善，推荐给大家！',
        createdAt: new Date().getTime() - 7200000 // 2小时前
      },
      { 
        user: { name: '王芳' }, 
        content: '交通便利，小区绿化做得很好，安静舒适，是个理想的居住地方。',
        createdAt: new Date().getTime() - 10800000 // 3小时前
      }
    ];
    startCommentScroll();
  });
});

// 格式化地址为三级结构
const formatAddressOptions = (communityList) => {
  const addressMap = {};
  
  communityList.forEach(community => {
    community.address?.forEach(addr => {
      const { market, region, details } = addr;
      
      // 一级：城市
      if (!addressMap[market]) {
        addressMap[market] = { label: market, value: market, children: {} };
      }
      
      // 二级：区域
      if (!addressMap[market].children[region]) {
        addressMap[market].children[region] = { label: region, value: region, children: [] };
      }
      
      // 三级：详细地址
      const detailsExists = addressMap[market].children[region].children.some(
        item => item.value === details
      );
      if (!detailsExists) {
        addressMap[market].children[region].children.push({
          label: details,
          value: details
        });
      }
    });
  });
  
  // 转换为数组格式
  return Object.values(addressMap).map(city => {
    return {
      ...city,
      children: Object.values(city.children)
    };
  });
};

// 启动评论滚动
const startCommentScroll = () => {
  console.log('启动评论滚动...');
  
  // 如果只有一条评论或没有评论，不启动滚动
  if (hostComments.value.length <= 1) {
    console.log('评论数量不足，不启动滚动');
    return;
  }
  
  // 自动滚动逻辑
  commentTimer = setInterval(() => {
    // 计算下一条评论索引
    currentCommentIndex.value = (currentCommentIndex.value + 1) % hostComments.value.length;
    console.log(`切换到评论索引: ${currentCommentIndex.value}`);
  }, 5000); // 每5秒切换一次
};

// 自动轮播逻辑
const startAutoPlay = () => {
  stopAutoPlay();
  carouselTimer = setInterval(() => {
    nextSlide();
  }, 5000);
};
const stopAutoPlay = () => {
  if (carouselTimer) {
    clearInterval(carouselTimer);
    carouselTimer = null;
  }
};

// 轮播控制方法
const goToSlide = (index) => {
  currentIndex.value = index;
};
const prevSlide = () => {
  transitionStyle.value = 'transform 0.5s ease';
  currentIndex.value = (currentIndex.value - 1 + CarouselImageList.value.length) % CarouselImageList.value.length;
};
const nextSlide = () => {
  transitionStyle.value = 'transform 0.5s ease';
  currentIndex.value = (currentIndex.value + 1) % CarouselImageList.value.length;
};

// 轮播图点击事件
const handleCarouselClick = (index) => {
  const currentCommunity = CarouselImageList.value[index];
  router.push({
    name: 'CommunityDetail', 
    params: { comId: currentCommunity.comId } 
  });
};

// 筛选逻辑
const handleFilter = (type) => {
  if (type === 'rate') {
    currentFilter.value = 'rate';
    // 从原始列表按评分排序，不考虑地址筛选
    recommendList.value = [...originalList.value].sort((a, b) => b.assess - a.assess);
    // 清空地址选择
    selectedAddress.value = [];
  }
};

// 地址选择变化时筛选推荐列表
const handleAddressChange = () => {
  currentFilter.value = 'address';
  
  if (!selectedAddress.value.length) {
    // 未选择地址时，显示原始列表
    recommendList.value = [...originalList.value];
    return;
  }

  // 拼接地址参数（格式："城市,区域,详细地址"）
  const addressParam = selectedAddress.value.join(',');
  console.log('筛选地址参数：', addressParam);
  // 调用地址筛选接口
  communityListByAddress({ address: addressParam }).then(res => {
    if (res.code === 200) {
      // 直接使用接口返回的地址筛选列表，不考虑评分
      recommendList.value = res.data;
    }
  }).catch(err => {
    console.error('按地区筛选失败：', err);
    // 错误处理：显示空列表或提示信息
    recommendList.value = [];
  });
};

// 推荐项点击事件
const handleItemClick = (item) => {
  console.log('点击推荐项：', item.comId);
  router.push({
    name: 'CommunityDetail',
    params: { comId: item.comId }
  });
};

// 获取用户姓名首字母
const getInitials = (name) => {
  if (!name) return '?';
  // 处理中文姓名取第一个字符，英文姓名取首字母
  if (/[\u4e00-\u9fa5]/.test(name)) {
    return name.charAt(0);
  } else {
    const matches = name.match(/\b\w/g);
    return matches ? matches[0].toUpperCase() : '?';
  }
};

// 根据用户名生成不同的头像背景色
const getAvatarColor = (name) => {
  if (!name) return '#007bff';
  
  // 根据姓名生成哈希值
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  
  // 根据哈希值生成颜色
  const colors = [
    '#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8',
    '#6c757d', '#343a40', '#007bff', '#6610f2', '#e83e8c'
  ];
  
  return colors[Math.abs(hash) % colors.length];
};

// 格式化评论时间 - 使用createdAt字段
const formatCommentTime = (timestamp) => {
  if (!timestamp) return '未知时间';
  
  const date = new Date(timestamp);
  
  // 格式化为 "YYYY-MM-DD HH:MM"
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 监听轮播容器交互
watch(carouselContainer, (el) => {
  if (el) {
    el.addEventListener('mouseenter', stopAutoPlay);
    el.addEventListener('mouseleave', startAutoPlay);
    return () => {
      el.removeEventListener('mouseenter', stopAutoPlay);
      el.removeEventListener('mouseleave', startAutoPlay);
      stopAutoPlay();
    };
  }
});

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoPlay();
  if (commentTimer) {
    clearInterval(commentTimer);
    commentTimer = null;
  }
});
</script>

<style scoped>
/* 全局样式 */
.content {
  background: #d9cde6; 
  min-height: calc(100vh - 60px);
  padding: 20px;
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

/* 欢迎标语 */
.welcome-section {
  width: 80%;
  margin: 0 auto 30px;
  padding: 25px 20px;
  background-color: transparent;
  border-radius: 12px;
}
.welcome-text {
  font-size: 24px;
  color: #075269;
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 2px rgba(92, 204, 167, 0.2);
  letter-spacing: 0.5px;
}

/* 横向布局容器 */
.horizontal-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}

/* 左侧统计 */
.stats-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stat-item {
  width: 180px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px #5ccca7;
  text-align: center;
  transition: transform 0.2s ease;
}
.stat-item:hover {
  transform: translateY(-5px);
}
.stat-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

/* 轮播图 */
.carousel-section {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #5ccca7;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.carousel-track {
  display: flex;
  height: 100%;
}
.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.community-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.address-info {
  margin-bottom: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.address-label {
  font-weight: bold;
  margin-right: 5px;
}
.address-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.description-info {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 轮播指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.indicator-dot.active {
  background-color: #fff;
  width: 30px;
  border-radius: 5px;
}

/* 箭头按钮 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  z-index: 10;
}
.carousel-arrow:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.prev-arrow {
  left: 15px;
}
.next-arrow {
  right: 15px;
}

/* 右侧评论区域 - 加宽 */
.comment-section {
  width: 320px; /* 加宽评论区 */
  height: 300px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #5ccca7;
  padding: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.comment-header {
  font-size: 18px;
  font-weight: 600;
  color: #075269;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

/* 空评论提示 */
.comment-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}
.empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #ccc;
}
.empty-text {
  font-size: 14px;
}

.comment-list {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* 评论卡片样式 */
.comment-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.comment-card.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

.comment-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-right: 12px;
}

.avatar-initial {
  font-size: 18px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-body {
  margin-bottom: 10px;
}

.comment-content {
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

/* 评论指示器 */
.comment-indicators {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.comment-indicators .indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ddd;
  transition: background-color 0.3s ease;
}

.comment-indicators .indicator-dot.active {
  background-color: #007bff;
}

/* 推荐列表容器 */
.recommend-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #5ccca7;
  padding: 20px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.filter-btn {
  color: #075269;
  font-weight: 500;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.filter-btn:hover {
  background-color: #e6f7ef;
}
.filter-btn.active {
  background-color: #5ccca7;
  color: white;
}
/* 级联选择器样式 */
.address-cascader {
  width: 300px;
}

/* 推荐列表 */
.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.recommend-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.recommend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(92, 204, 167, 0.3);
}
/* 星级评分 */
.star-rating {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}
.star {
  color: #ccc;
  font-size: 16px;
  margin-right: 2px;
}
.star.filled {
  color: #ffca28;
}
.rating-value {
  margin-left: 5px;
  color: #666;
  font-size: 14px;
}
/* 列表项内容 */
.item-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}
.item-address {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.item-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 空数据提示 */
.empty-tip {
  text-align: center;
  color: #999;
  padding: 30px 0;
  margin: 0;
}

/* 地址标签统一样式 */
.address-label {
  color: #999;
  font-size: 13px;
}
.address-value {
  flex: 1;
  font-size: 13px;
}
</style>